<?php 

	$id = "test";
	$name = "test3";
	$surname = "testsur";
	$gender = "MALE";



?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
   <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
   <link href="css/family-tree.css" rel="stylesheet" type="text/css" />
  <link href="css/form.css" rel="stylesheet" type="text/css" />
  <link href="css/jqueryui/jquery-ui.css" rel="stylesheet" type="text/css"/>
  
  <script type="text/javascript" src="js/website/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/website/cufon-yui.js"></script>
  <script type="text/javascript" src="js/website/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/website/Humanst521_Lt_BT_400.font.js"></script>
  <script type="text/javascript" src="js/website/roundabout.js"></script>
  <script type="text/javascript" src="js/website/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/website/gallery_init.js"></script>
  <script type="text/javascript" src="js/website/cufon-replace.js"></script>
  <script type="text/javascript" src="js/dialog.js"></script>
  <script type="text/javascript" src="js/jquery/jquery.validate.js"></script>
  <script type='text/javascript' src='js/jquery/jquery.min.js'></script>
  <script src='js/jquery/jquery-ui.min.js'></script>
  
<script language="JavaScript" type="text/javascript" src="js/jquery/cake.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery/familyTree.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery/customCake.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery/layoutManager.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery/main.js"></script>

<script type="text/javascript">

PabloTreeDirector = function( builder ) {
	this.builder = builder;
};

PabloTreeDirector.prototype = new FamilyTreeDirector();

PabloTreeDirector.prototype.construct = function() {
	this.builder.buildFamilyTree();
	
	var andrewId = "Andrew";
	this.builder.buildFamilyMember(andrewId, "Andrew1", "Samplethorp", MALE, "01/01/1940", "", "");

	root = "Andrew";
	
	var andreaId = "Andrea";
	this.builder.buildFamilyMember(andreaId, "Andrea1", "Samplethorp", FEMALE, "01/01/1940", "", "");
	
	this.builder.buildMarriage( andrewId, andreaId, MARRIED_STATUS );

	var testname = "<?php echo $id;?>";
	

	this.builder.buildFamilyMember(testname, "<?php echo $name?>", "Samplethorp", <?php echo $gender?>, "01/01/1940", "", "");
	
	
	this.builder.buildChild( andrewId, andreaId, testname, false );
	
	
		
};


</script>

</head>

<body onLoad="init();">
  <!-- header -->
  <header>
    <div class="container">
    	<h1><a href="home.php">FamTree</a></h1>
      <nav>
        <ul>
          <li><a href="home.php">Home</a></li>
          <li><a href="profile.php">Profile</a></li>
          <li><a href="pedigreetree.php" class="current">Tree</a></li>
          <li><a href="list.php">List</a></li>
          <li><a href="#">News</a></li>
        </ul>
      </nav>
    </div>
	</header>
	<div class="container">
		<?php 
   			include ("loginBox.php")
    	?>
    </div>
  
  <div class="main-box-tree">
    <div class="container">
    	
		 <div class="wrapper">
	
		 <canvas id="myCanvas" width="1000" height="400" style="position:relative; z-index:1;"></canvas>
		 <br></br>
		<img align="center" src="images/zoomin.jpg" height=50 width=50 alt="zoom in" onClick="zoom2(-ZOOM_BUTTONFACTOR);" />Zoom In
		<img align="center" src="images/zoomout.jpg" height=50 width=50 alt="zoom out" onClick="zoom2(ZOOM_BUTTONFACTOR);" />Zoom Out
		<img id="photo" src="images/noimage.gif" height="200" width="200" />
		
		 <!-- 
		 	<canvas id="myDrawing" width="2000" height="1000" style="position:relative; z-index:1;"></canvas>
		 	
		 	<div class="person" style="position:absolute; z-index:1; top:10px; left:10px;">
				<div class="boy">
						<span class="firstname">Yan Zhang</span>
						<span class="surname">Tan</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>
		 	<div class="person" style="position:absolute; z-index:1; top:10px; left:180px;">
				<div class="girl">
						<span class="firstname">Adeline</span>
						<span class="surname">Lee</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>
			
			<div class="person" style="position:absolute; z-index:1; top:240px; left:100px;">
				<div class="girl">
						<span class="firstname">1st Child</span>
						<span class="surname">Tan</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>

			<div class="person" style="position:absolute; z-index:1; top:240px; left:220px;">
				<div class="girl">
						<span class="firstname">2nd Child</span>
						<span class="surname">Tan</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>

			<div class="person" style="position:absolute; z-index:1; top:240px; left:340px;">
				<div class="girl">
						<span class="firstname">3rd Child</span>
						<span class="surname">Tan</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>

			<div class="person" style="position:absolute; z-index:1; top:240px; left:460px;">
				<div class="boy">
						<span class="firstname">4th Child</span>
						<span class="surname">Tan</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>
						<div class="person" style="position:absolute; z-index:1; top:240px; left:630px;">
				<div class="girl">
						<span class="firstname">Joey</span>
						<span class="surname">Lim</span>
						<img src="" class="photo" />
						<a href="www.yahoo.com.sg" class="profile">View Profile</a>
						<a href="#" class="addrelations" onclick="addFamilyMember()" >Add Family</a>
						<a href="testtree.php">view tree(+2)</a>
						<a href="" class="btn-delete"></a>
				</div>
			</div>
			-->
			
		</div>
    </div>
  </div>

  <!-- footer -->
  <footer>
    <div class="container">
    	<div class="wrapper">
        <div class="fleft">Copyright - Yan Zhang Tan</div>
      </div>
    </div>
  </footer>
  <script type="text/javascript"> Cufon.now(); </script>
  
  
 <form id="addFamilyMemberForm" method="POST" action="javascript:validateFamilyMemberForm()" style="display:none;">
	<div class="form-row">
		<span class="label">Gender</span>
		<div class="male"><input type="radio" name="gender" value="male" />Male</div>
		<div class="female"><input type="radio" name="gender" value="female" checked/>Female</div>
	</div>
	<div class="form-row">
		<span class="label">Name</span>
		<input type="text" name="name" />
	</div>
	<div class="form-row">
		<span class="label">Surname</span>
		<input type="text" name="surname" />
	</div>
	<div class="form-row">
		<span class="label">Date of Birth</span>
		<input id="datepicker1" type="text" name="dob" onfocus="validateBirthDate()"></input>
	</div>
	<div class="form-row">
		<span class="label">Date of Deceased</span>
		<input id="datepicker2" type="text" name="dod" onfocus="validateDeceasedDate()"></input>
	</div>
	<div class="form-row">
		<input class="submit" type="submit" value="Add">
	</div>

</form>
  
</body>
</html>
